import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { getUserInfo, getScheduling } from "../../api";
import "./index.less";

// const schedulingMock = {
//   jddz: "广东省广州市广东南路225号78栋，光明国际酒店302房间",
//   hczw: "光明国际酒店3楼大会议室座位号：3排1号",
//   yczw: "光明国际酒店 3楼 光明厅餐桌号：2号",
//   cph: "沪A99999",
//   tzdd: "广东南路225号 100米",
// };

@withRouter
export default class Scheduling extends Component {
  state = {
    userInfo: null,
    scheduling: {},
  };

  constructor(props) {
    super(props);
  }

  loadUserInfo() {
    getUserInfo().then((result) => {
      // console.log(result);
      if (result.ret == 200) {
        this.setState({
          userInfo: result.data,
        });
      }
    });
  }

  loadScheduling() {
    getScheduling(this.props.match.params.id).then((result) => {
      // console.log(result);
      if (result.ret == 200) {
        this.setState({
          scheduling: result.data,
        });
      }
    });
  }

  componentDidMount() {
    document.title = "行程安排";
    this.loadUserInfo();
    this.loadScheduling();
  }

  render() {
    return (
      <div className="scheduling">
        <div className="group">
          <div className="item">
            <div className="user">
              <div className="avatar">
                <img src={this.state.userInfo && this.state.userInfo.img}></img>
              </div>
              <div className="name">
                {this.state.userInfo && this.state.userInfo.name}
              </div>
            </div>
          </div>
          <div className="item">
            <div className="title">酒店住宿</div>
            <div className="content">{this.state.scheduling.jddz}</div>
          </div>
          <div className="item">
            <div className="title">会场座位</div>
            <div className="content">{this.state.scheduling.hczw}</div>
          </div>
          <div className="item">
            <div className="title">用餐座位</div>
            <div className="content">{this.state.scheduling.yczw}</div>
          </div>
          <div className="item">
            <div className="title">车队安排</div>
            <div className="content">
              车牌号:{this.state.scheduling.cph}
              <br />
              停车地址:{this.state.scheduling.tzdd}
            </div>
          </div>
        </div>
        <div className="group group2">
          <div className="item">外部用户行程信息</div>
        </div>
      </div>
    );
  }
}
